<template>
  <div class="add-btn">
    <el-popover
      placement="top-start"
      :width="250"
      style="margin: 0; padding: 0"
      trigger="click"
    >
      <template #reference>
        <el-button
          type="primary"
          size="large"
          icon="el-icon-delete"
          class="rotate90"
          circle
        >
          <font-awesome-icon
            icon="plus"
            style="font-size: 20px; margin-left: -7px"
          ></font-awesome-icon>
        </el-button>
      </template>
      <div class="flex-card">
        <div @click="handleAdd('2')" class="flex-card-item">
          <font-awesome-icon
            icon="table"
            class="card-icon iconExcel"
          ></font-awesome-icon>
          <div class="head-title">协同表格</div>
        </div>

        <div class="flex-card-item" @click="handleAdd('1')">
          <font-awesome-icon
            icon="file-word"
            class="card-icon iconWord"
          ></font-awesome-icon>
          <div class="head-title">空白文档</div>
        </div>
      </div>
    </el-popover>
  </div>
</template>  
<script lang="ts">
import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { addNote } from "@/api/home";
import { DEFAULT_WORKBOOK_DATA } from "@/assets/default-workbook-data";
export default defineComponent({
  props: {
    // 双向绑定
    menuList: {
      type: Array,
      default: () => [],
    },
    // 双向绑定
    row: {
      type: Object,
      default: () => {
        return [];
      },
    },
    setActiveNote: {
      type: Function,
      default: () => {},
    },
    // 双向绑定
    configIndex: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    getList: {
      type: Function,
      default: () => {},
    },
  },
  setup(props: any, { emit }: any) {
    const state = reactive({
      loading: false,
    });

    const { proxy } = getCurrentInstance() as any;

    const handleAdd = async (configId: any) => {
      const parmas = {
        title: "无标题笔记",
        content: "",
        show: false,
        configId: configId,
      };

      if (parmas.configId == "2") {
        parmas.content = JSON.stringify(DEFAULT_WORKBOOK_DATA);
      }
      let res = await addNote(parmas);
      if (res.status == 0) {
        props.getList(props.menuList[0], 0);
        setTimeout(() => {
          //设置选中该菜单第一条
          props.setActiveNote(0);
        }, 1000);
      } else {
        ElMessage.error(res.message);
      }
    };

    return {
      ...toRefs(state),
      handleAdd,
    };
  },
});
</script>
    
<style>
.el-popper {
  min-width: 100px !important;
}

.el-popover.el-popper {
  padding: 0;
}
</style>
    